const path=require('path');
const HtmlWebpackPlugin=require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const WebpackBar=require('webpackbar')
const Mock=require('mockjs');
const data=Mock.mock({
    'list|6':[{
        'img':'@image(100x100,@color)',
        'cont':'@cword(5,10)',
        'price|50-1000':50
    }]
})

module.exports={
    entry:'./src/index.js',
    output:{
        path:path.join(__dirname, './dist'),
        filename:'[hash]style.js',
        clean:true
    }
    ,
    mode:'development',
    plugins:[
        new HtmlWebpackPlugin({template:'./src/index.html'}),
        new MiniCssExtractPlugin(), //抽离css
        new WebpackBar() //进度条
    ],
    //配置别名
    resolve: {
        alias: {
          css: path.resolve(__dirname, 'src/css/'),
          img: path.resolve(__dirname, 'src/assets/img/'),
        },
      },
       //配置 devtool souremap
    // devtool:'source-map'  souremap要求构建、重新构建速度较快
      devtool:'source-map',
    module:{
        rules: [
            {
              test: /\.css$/i,
              use: [MiniCssExtractPlugin.loader, "css-loader"],
            },
            {   //- 5. 配置解析es6语法 (10分)
                test: /\.m?js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                  loader: 'babel-loader',
                  options: {
                    presets: ['@babel/preset-env']
                  }
                }
              }
          ],
    }
    ,
    devServer:{
        host:'localhost',
        port:9999,
        open:true,
        hot:true,//热更新
        compress:true,// 3. 压缩css(10分)
        before(app){// devServer拦截请求(10分)
            app.get('/list', (req, res) => {
                res.send(data.list)
            })
        }
    }
}
